import React, {Component} from 'react';
import {
  SafeAreaView,
  FlatList,
  StyleSheet,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import {ListItem, Icon, Badge} from 'react-native-elements';
import {Actions} from 'react-native-router-flux';
import Api from '../Api';
import Empty from '../components/Empty';
export default class WorksheetScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    this.page = 0;
    this.fetchData();
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.updateTime !== nextProps.updateTime) {
      this.page = 0;
      this.fetchData();
    }
  }

  fetchData() {
    this.isLoading = true;
    const {status} = this.props.navigation.state.params;
    Api.worksheet(status, this.page).then(data => {
      if (data.status === 400) {
        return;
      }
      this.isLoading = false;
      if (this.page === 0) {
        this.setState({
          data: data.content,
          isLast: data.isLast,
        });
        return;
      }
      const olddata = this.state.data || [];
      this.setState({
        data: olddata.concat(data.content),
        isLast: data.isLast,
      });
    });
  }
  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <StatusBar barStyle="light-content" backgroundColor="#5096fc" />
        <FlatList
          data={this.state.data}
          keyExtractor={item => String(item.id)}
          style={{flex: 1}}
          renderItem={({item}) => (
            <ListItem
              key={item.orderCode}
              bottomDivider
              onPress={() => {
                Actions.sheetDetail({item});
              }}>
              <Icon
                name={item.orderSource == 1 ? 'exclamation-triangle' : 'tasks'}
                color={item.orderSource == 1 ? 'orange' : null}
                type="font-awesome-5"
              />
              <ListItem.Content>
                <ListItem.Title>{item.orderCode}</ListItem.Title>
                <ListItem.Subtitle>
                  {item.taccident ? item.taccident.customerName : null}
                </ListItem.Subtitle>
              </ListItem.Content>
              <ListItem.Content right>
                <ListItem.Title right>
                  {Api.getStatus(item.status)}
                </ListItem.Title>
              </ListItem.Content>
              <ListItem.Chevron />
            </ListItem>
          )}
          ListEmptyComponent={<Empty />}
          onEndReached={() => {
            if (!this.state.isLast && !this.isLoading) {
              this.page += 1;
              this.fetchData();
            }
          }}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  textInput: {
    color: Colors.dark,
    backgroundColor: Colors.white,
    alignSelf: 'center',
    width: '80%',
    padding: 10,
    marginBottom: 10,
  },
});
